<template>
    <button @click="setList">set list</button>
    <div style="width: 200px;height: 100px;">
        <sa-list-roll-linear :listData="data">
            <template #item="{ data, index }">
                <b>{{ data }}{{ index }}</b>
            </template>
        </sa-list-roll-linear>

    </div>

    <div @mouseenter="mouseEnter" @mouseleave="mouseLeave" style="width: 200px;height: 100px;">
        <sa-list-roll-linear-v2 ref="fff" :list="data" interval="24">
            <template #item="{ item ,ranking}">
                <div>
                    {{ranking}}{{ item }}
                </div>
            </template>
        </sa-list-roll-linear-v2>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
let data = ref([
    { name: '我是dom第一个' },
    { name: '我是dom第二个' },
    { name: '我是dom第三个' },
    { name: '我是dom第四个' },
    { name: '我是dom第五个' },
    { name: '我是dom第六个' },
    { name: '我是dom第七个' },
    { name: '我是dom第八个' },
    { name: '我是dom第九个' },
    { name: '我是dom第十个' },
])
const setList = () => {
    data.value.push({
        name: 'new list'
    })
}

let fff = ref();
const mouseEnter = () =>{
    // fff.value.suspend(false);
}
const mouseLeave = () =>{
    // fff.value.play();
}
</script>